<template>
  <!-- 区域：年份 | 月份 ｜ 日 -->
  <div class="scroll-container">
    <!-- 遮罩层 -->
    <div class="mask"></div>
    <!-- 中间选中的那一项 -->
    <div class="target-center"></div>
    <!-- 滚动区域的包装盒子 -->
    <div class="wrapper" ref="oWrapper" @scrollend="handleScrollEnd">
      <div class="scroll-wrapper">
        <!-- 空白盒子保证留白区域 -->
        <list-item></list-item>
        <list-item></list-item>
        <!-- 出口index.vue文件定义模版并进行子项遍历的slot -->
        <slot></slot>
        <!-- 空白盒子保证留白区域 -->
        <list-item></list-item>
        <list-item></list-item>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { inject, ref, onMounted } from "vue";
import { IInjection, IScrollContainerProps, DateMark } from "./types";
import ListItem from "./ListItem.vue";

const { currentDate, years, months, days } = inject('provideData') as IInjection;
const props = defineProps<IScrollContainerProps>();
const emit = defineEmits([
  'setYear',
  'setMonth',
  'setDay'
])
const oWrapper = ref<HTMLElement>();

// 以下均为响应式数据：
// console.log(currentDate); //[2021, 2, 19]
// console.log(years); 
// [2000, 2001, 2002, 2003, ..., 2023]
// console.log(months);
// [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]
// console.log(days);
// [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, ..., 28]

//根据用户配置的日期去匹配相应年份，月份，日的索引位置，并根据索引进行定位。
function initCurrentDate(){
  let index: number = 0;
  switch(props.field){
    case DateMark.YEAR:
      index = years.indexOf(currentDate[0]);
      break;
    case DateMark.MONTH:
      index = months.indexOf(currentDate[1]);
      break;
    case DateMark.DAY:
      index = days.indexOf(currentDate[2]);
      break;
    default:
      break;
  }
  setScrollY(index);
}

//根据 索引 * 子项元素高度 计算出距离顶部的距离并滚动至指定位置
function setScrollY(index: number) {
  //滚动至(x, y)
  oWrapper.value!.scrollTo(0, index * 50);
}

function handleScrollEnd(){
  //滚动结束时，根据滚动距离计算出当前索引
  const index = oWrapper.value!.scrollTop / 50;
  switch(props.field){
    case DateMark.YEAR:
      emit('setYear', index);
      break;
    case DateMark.MONTH:
      emit('setMonth', index);
      break;
    case DateMark.DAY:
      emit('setDay', index);
      break;
    default:
      break;
  }
}

//组件挂载时
onMounted(() => {
  //初始化当前日期
  initCurrentDate();
})

</script>

<style lang="scss">
.scroll-container .wrapper {
  overflow-y: auto;
  height: 250px;
  /* 实现来捕捉滚动内部的子项元素，
  并强制性对`y`进行监控，
  类似`swiper`中左右滑动一定距离
  的吸附归位动画功能。 */
  scroll-snap-type: y mandatory;
}

/* 去掉滚动条 */
::-webkit-scrollbar {
  display: none;
}

/* 中间选中盒子 */
.target-center {
  position: absolute;
  top: 100px;
  left: 0;
  z-index: -1;
  width: 100%;
  height: 50px;
  border-top: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
  box-sizing: border-box;
}
</style>